<template>
	<view class="content">
		<view class='header'>
			<view class='search'>
				<input class="uni-input search-area" focus placeholder="搜索你想了解的私信..." v-model="keyWord"
					@confirm="search" />
			</view>
		</view>

		<!-- 侧滑列表 -->
		<view class="list">
			<scroll-view style="height: 25rem;" :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true"
				:refresher-triggered="triggered" :refresher-threshold="100" @refresherrefresh="onRefresh"
				@scrolltolower="lower">
				<view v-for="item in messageList" :key="item.id" class="swipe-action u-border-top u-border-bottom">
					<view class="item">
						<view class="business">
							<view class="avatar" @click="goCenter(item.sender.id)">
								<image mode="aspectFit"
									:src="item.sender ? item.sender.avatar_text : '/static/avatar.png'">
								</image>
							</view>
						</view>

						<view class="info">
							<text class="nickname">{{ item.sender ? item.sender.nickname : "默认用户" }}</text>
							<view class="desc">
								{{ item.content }}
							</view>
							<view class="action">
								<view class="btn">
									<u-button type="primary" text="发私信" size="mini" shape="circle"
										@click="sendMessage(item.senderid)"></u-button>
								</view>
								<view class="btn">
									<u-button type="warning" :plain="true" :text="item.status==0?'读取':'已读'" size="mini" shape="circle"
										@click="readMessage(item.id,item.status)"></u-button>
								</view>
								<view class="btn">
									<u-button type="error" text="删除" size="mini" shape="circle" @click="deleteMessage(item.id)"></u-button>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- <u-back-top :scroll-top="scrollTop"></u-back-top> -->
			</scroll-view>

		</view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>

		<!-- 弹框组件 -->
		<u-modal :show="show" :title="'提醒'" :content="content" showCancelButton :closeOnClickOverlay="true"
			@cancel="show = false" @close="show = false" @confirm="confirm"></u-modal>

		<!-- 回答弹出层 -->
		<u-popup :show="messageShow" @close="messageShow = false">
			<view class="answer">
				<u-form labelPosition="top" labelWidth="150" :model="message" :rules="rules" ref="answer">
					<!-- 描述 -->
					<u-form-item label="私信内容：" prop="content" ref="content">
						<u--textarea v-model="message.message" placeholder="请输入私信内容"></u--textarea>
					</u-form-item>

					<view class="btn">
						<u-button type="primary" text="发送" formType="submit" @click="submit"></u-button>
					</view>
				</u-form>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	onLoad() {
		this.business = uni.getStorageSync("business") ?? {}
		this.onRefresh()
	},
	data() {
		return {
			show: false,
			content: '是否确认删除私信',
			scrollTop: 0,
			triggered: false,
			keyWord: "",
			page: 1,
			limit: 10,
			messageList: [],
			business: {},
			messageShow: false,
			recipientid: 0,
			message: {
				message: '',
			},
			rules: {
				message: {
					type: 'string',
					required: true,
					message: '请填写私信内容',
					trigger: ['blur', 'change']
				},
			},
			deleteid:0
		}
	},
	methods: {
		async confirm() {
			this.show = false
			let data = {
				messageid:this.deleteid,
				busid:this.business.id
			}
			let result = await uni.$u.http.post("/business/removeMessage",data)
			if(result.code){
				this.$refs.notice.show({
					type:"success",
					message:result.msg,
					duration:1000,
					complete:()=>{
						this.onRefresh()
					}
				})
				return false
			}else{
				this.$refs.notice.show({
					type:"error",
					message:result.msg
				})
				return false
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onRefresh() {
			if (this._freshing) return;
			this._freshing = true;
			this.triggered = true
			this.page = 1;
			this.messageList = []
			this.lower()
		},
		async lower(e) {
			// 发送请求
			let data = {
				page: this.page,
				limit: this.limit,
				keyWord: this.keyWord,
				recipientid: this.business.id
			}
			let result = await uni.$u.http.post("/business/showMessage", data)
			if (result.code == 0) {
			} else {
				this.page++
				this.messageList.push(...result.data)
				this.triggered = false;
				this._freshing = false;
			}
		},
		search() {
			this.onRefresh()
		},
		goCenter(busid) {
			uni.$u.route({
				url: "/pages/business/center",
				params: { busid }
			})
		},
		sendMessage(senderid) {
			this.recipientid = senderid
			this.messageShow = true
		},
		async submit() {
			let data = {
				content: this.message.message,
				recipientid: this.recipientid,
				senderid: this.business.id
			}
			this.message.message = ''
			this.messageShow = false
			let result = await uni.$u.http.post("/business/sendMessage", data)
			if (result.code) {
				this.$refs.notice.show({
					type: "success",
					message: result.msg
				})
				return false
			} else {
				this.$refs.notice.show({
					type: "error",
					message: result.msg
				})
				return false
			}
		},
		async readMessage(id,status=0) {
			if(status == 1){
				return false
			}
			let data = {
				messageid:id,
				busid: this.business.id
			}
			let result = await uni.$u.http.post("/business/readMessage", data)
			if (result.code) {
				this.$refs.notice.show({
					type: "success",
					message: result.msg,
					duration: 1000,
					complete: () => {
						this.onRefresh();
					}
				})
				return false
			} else {
				this.$refs.notice.show({
					type: "error",
					message:result.msg
				})
				return false
			}
		},
		deleteMessage(messageid){
			this.deleteid = messageid
			this.show = true
		}
	}
}
</script>

<style>
.content {
	width: 100%;
	overflow-x: hidden;
}

.search {
	height: 238rpx;
	background-image: url("/static/titlebg.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	padding: 0 28rpx;
	display: flex;
	align-items: center;
	align-content: center;
}

.search-area {
	width: 100%;
	height: 88rpx;
	background-color: #fff;
	background-image: url("/static/search.png");
	background-repeat: no-repeat;
	background-size: 30rpx 30rpx;
	background-position: 35rpx 30rpx;
	border-radius: 11rpx;
	line-height: 88rpx;
	text-indent: 78rpx;
	color: #2f2e2e;
	font-size: 30rpx;
}

.list .item {
	display: flex;
	width: 95%;
	margin: 10px auto;
}

.business {
	width: 20%;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: 10px;
	margin-right: 10px;
}

.avatar {
	width: 100%;
	height: 5em;
}

.avatar image {
	width: 100%;
	height: 100%;
}

.info {
	font-size: .9em;
	color: #999;
}

.info .nickname,
.info .desc {
	margin-bottom: 2px;
}

.info .nickname {
	font-size: 1.1em;
	width: 95%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #000;
	font-weight: bold;
}

.info .desc {
	font-size: .8em;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	margin-bottom: .5em;
	/* 改成你需要的行数 */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.info .action {
	display: flex;
	width: 100%;
	justify-content: flex-end;
}

.info .action .btn {
	margin-right: 10px;
}
</style>
